/*

name: Scrapbook
designer: Ruan YiFeng
designer_url: http://www.ruanyifeng.com
description: clean and minilism.
layouts: one-column, two-column-left, two-column-right, three-column

*/

/* CSS Resetting */
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li, tt,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:left;
 text-decoration:none;
 border-bottom:none;
 font-weight:normal;
 font-style:normal;
 border:none;
 color:#111111;
 
}

/* Basic Styling */

body {
       margin:0;
       padding:0;
       background-color: #f5f5d5 ;
       font-family: Georgia, serif;
       letter-spacing: -0.01em;
       word-spacing:0.2em;
       line-height: 1.8em;
       font-size:62.5%;
       color:#111111;
       width:98%;
}

body.mobile{
    font-size: 60%;
}

body.mobile.two-columns{
    font-size: 100%;
}

#container::before {
  display: none;
}

@media (max-width: 30rem) {
  body,
  body.mobile.two-columns{
    font-size: 60%;
  }
}

h1{
       font-size:2.88em;
}

h2 {
  font-size:2.88em;
  line-height: 1.35em;
}

body.mobile h2{
    font-size: 2em;
}

@media (max-width: 30rem) {
  h2{
    font-size: 2em;
  }
}

h3{
       font-size:1.87em;
}

h4{
       font-size:1.5em;
}

ul li {
       list-style-type: square; }

ol li {
       list-style-type: decimal;
       list-style-position:inside; }

img {
       border: 2px solid #00398a; }
       
strong{
  font-weight:800; 
}

p,li{
  font-size:1.6em;
  line-height:220%;
} 

input,textarea{
  font-size:1.13em;
}

select,button{
  font-size:1.03em;
}

/* Container */

#container{
       margin: 0 auto;
       background-color:#f5f5d5;
       padding: 1em;
       
}

body.one-column #container{
       width: 65%;
       min-width:640px;
       max-width:960px;
}

body.two-columns #container{
    width:85%;
  min-width: 780px;
  max-width: 1260px;
}

body.mobile.one-column #container,
body.mobile.two-columns #container{
  width: 98%;
  min-width:0px;
  overflow: hidden;
}

@media (max-width: 48rem) {
  #container{
    padding: 0.5em;
  }
  body.one-column #container{
    width: 98%;
    min-width:0px;
    overflow: hidden;
  }
  body.two-columns #container{
    width:98%;
    min-width:0px;
    overflow: hidden;
  }
}

/* Header */

#header{
  width:100%;
}

#header{
  border-bottom:1px solid #d3d3d3;
  margin:1em;
  float:left;
  height:5em;
}

#header h1,#header #header-description, #header div#header-name{
  margin-top:0.9em;
  font-size:1.8em;
  /* float:left; */
  color:#556677;
}

#header h1, #header div#header-name{
    float:left;
}

#header #feed_icon,#header #google_search{
       float:right;
       margin-left:1%;
       margin-right:1%;
}

#header #feed_icon{
  margin-top:0.9em;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg); 
  -o-transform: rotate(5deg);
  transform: rotate(5deg); 
  -webkit-transition: -webkit-transform .4s ease-in; 
  -moz-transition: -moz-transform .4s ease-in; 
  -o-transition: -o-transform .4s ease-in;
  transition: transform .4s ease-in; 
}

#header #feed_icon:hover{
  -webkit-transform: rotate(275deg); 
  -moz-transform: rotate(275deg); 
  -o-transform: rotate(275deg);
  transform: rotate(275deg); 
}

#header #google_search{
       width:201px;
       height:2.4em;
       background-image:url("images/searchtop.gif");
       background-repeat:no-repeat; /*important*/
       padding:0px;
       margin:1.3em 1em;
       position:relative; /*important*/
}

#header #google_search form {
       display:inline ;
}

#header #google_search .searchbox {
  border:0px; /*important*/
  background-color:transparent; /*important*/
  position:absolute; /*important*/
  top:0px;
  left:1px;
  width:180px;
  height:24px;
  outline: none;
}

#header #google_search .searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:0px;
left:176px;
width:29px;
height:25px;
}

#header a{
       color:orange;
}

#footer img{
  border:none;
}

body.mobile #header #feed_icon{
  display: none;
}

body.mobile #header #google_search {
  display: none;
}

@media (max-width: 30rem) {
  #header #feed_icon{
    display: none;
  }
  #header #google_search {
    display: none;
  }
}

body.mobile #header{
    margin: 0 1em;
    height: 3em;
    margin-bottom: 1em;
    max-width: 95%;
 }
body.mobile #header h1,
body.mobile #header #header-description, 
body.mobile #header div#header-name{
    margin-top:0.5em;
  }

@media (max-width: 48rem) {
  #header{
    margin: 0 2em;
    height: 3em;
    margin-bottom: 1em;
    max-width: 95%;
 }
  #header h1,
#header #header-description, 
#header div#header-name{
    margin-top:0.5em;
  }
}
/* Content */

#content{
       clear:both;
       margin:1.5em 1em 1em 1em;
}

body.mobile #content {
  margin: 0em;
}

@media (max-width: 30rem) {
  #content {
    margin: 0em;
  }
}

#content h1, h2, h3 {
       margin:0.4em 0 0.2em 0;
       padding: 0 0 0.2em 0;
       color:#000000;
       font-weight:500;
       letter-spacing: -0.03em;
       border-bottom:1px solid #d3d3d3;
}

#content a:link{
       color:#556677;
}

#content a:visited{
       color:#556677;
}

#content a:hover{
       color:#665544;
}

#content .email{
       color:#556677;
}

/* One Column Layout*/

.one-column #alpha{
       width:100%;
}

.one-column #alpha h1{
  line-height:250%;
        font-family:'Trebuchet MS', Arial, 'Lucida Grande', Verdana, Lucida, Helvetica, sans-serif;  
}

body.one-column #content #alpha{
  padding-top:0.5em;
}  

body.one-column #content #alpha p{
  margin-top:1em;
  line-height:180%;
  margin-left:0.8em;
}

body.one-column #content #alpha .asset-content a:link{
       color:#223472;
}

body.one-column #content #alpha .asset-content a:visited{
       color:#440066;
}

body.one-column #content #alpha .asset-content a:hover{
       color:#D03500;
}

body.one-column #content #alpha .asset-content a:active{
       color:#9A2C06;
}

body.one-column #content #alpha .asset-content img{
  border: 0.3em solid #e0dfcc;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;

}

body.mobile.one-column #content #alpha .asset-content img{
  max-width: 95%;
  overflow: auto;
  border: 0.15em solid #e0dfcc;
}

@media (max-width: 48rem) {
  body.one-column #content #alpha .asset-content img{
    max-width: 95%;
    overflow: auto;
    border: 0.15em solid #e0dfcc;
  }
}

body.one-column #content #alpha .asset-content h2,
body.one-column #content #alpha .asset-content h3{
  margin-top:1.5em;
}

body.one-column #content #alpha .asset-content ul,
body.one-column #content #alpha .asset-content ol,
body.one-column #content #alpha .asset-content table{
  margin-left:4em;
}

body.mobile.one-column #content #alpha .asset-content ul,
body.mobile.one-column #content #alpha .asset-content ol,
body.mobile.one-column #content #alpha .asset-content table{
  margin-left:1.5em;
}

@media (max-width: 48rem) {
  body.one-column #content #alpha .asset-content ul,
  body.one-column #content #alpha .asset-content ol,
  body.one-column #content #alpha .asset-content table{
    margin-left:1.5em;
  }
}

body.one-column #content #alpha .asset-content table{
  border:1px solid #2b2b2b;
  font-family: verdana,arial,sans-serif;
  font-size:100%;
  color:#333333;
  border-width: 1px;
  border-collapse: collapse;
  width: 90%;
}

body.one-column #content #alpha .asset-content table td{
  border:1px solid #2b2b2b;
  font-size:1.4em;
  border-width: 1px;
  padding: 0.6em;
  border-style: solid;
  border-color: #666666;
}

body.one-column #content #alpha .asset-content table th{
  border-width: 1px;
  font-size:1.4em;
  padding: 0.6em;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

body.one-column #content #alpha ul#entry-folder span.folder-tag{
  color:green;
}

body.one-column #content #alpha p code{
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 120%;
  background-color: pink;
  border-radius: 5px;
  margin: auto 3px;
}

body.one-column #content #alpha p a code{
  text-decoration: underline;
  transition: all 1s;
}

body.one-column #content #alpha p a code:hover{
  text-decoration: none;
  background-color: deeppink;
  color: white;
}

/* Two Columns Layout*/

body.two-columns #content #alpha{
       width: 64%;
       min-width:470px;
       max-width:740px;
       margin-left:3%;
       float:left;
}

body.two-columns #content #beta{
       float:right;
       width:24%;
       padding:0.6em;
       margin-right:3%;
       margin-bottom:1em;
       min-width:180px;
       max-width:300px;
       overflow:hidden;
       -moz-border-radius: 20px;
       -webkit-border-radius: 20px;
       border-radius: 20px;
}

body.mobile.two-columns #content #alpha,
body.mobile.two-columns #content #beta{
  float:left;
  width:95%;
  min-width: 0px;
  max-width: none;
}

@media (max-width: 48rem) {
  body.two-columns #content #alpha,
  body.two-columns #content #beta{
    float:left;
    width:95%;
    min-width: 0px;
    max-width: none;
  }
}

body.two-columns #content #alpha h1{
       font-size:1.6em;
       font-weight:bold;
       color:#556677;
       padding:0.5em 1em;
       margin:0 0 1em 0;
       border-bottom:none;
       background-color:#AAD2F0;
       -moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius:10px; /* Saf3+, Chrome */
       border-radius: 10px;
}

body.two-columns #content #alpha h1 a{
  text-decoration:underline;
       color:#556677;
       font-weight:500;
}

body.two-columns #content #alpha h2{
       font-size:2.88em;
       font-family:'Trebuchet MS', Arial, 'Lucida Grande', Verdana, Lucida, Helvetica, sans-serif;
       line-height:180%;
       margin-bottom:0.5em;
}

body.two-columns #content #alpha h2 a:link,
body.two-columns #content #alpha h2 a:visited{
  color:#000000;
  font-weight:500;
}

body.two-columns #content #alpha .asset-header #asset-tags{
  float:right;
  margin-top:-1em;
  color:gray;
  padding-right:2em;
}

body.two-columns #content #alpha .asset-header #asset-tags p{
  font-size:1.44em;
}

body.two-columns #content #alpha .asset-header #asset-tags a{
  color:orange;
}

body.two-columns #content #alpha .asset-body p{
   font-size: 180%;
}

body.two-columns #content .content-nav {
       float:right;
       color:gray;
       position:relative;
       margin:0 2em -3em 2em;
       top:-5em;
       padding:0;
}

body.two-columns #content .content-nav p{
  font-size:1.44em;
}

body.two-columns #content .content-nav a{
       color:#556677;
       text-decoration:underline;
}

body.two-columns #content #alpha h2 a{
       text-decoration:none;
       color:#336699;
}

body.two-columns #content #alpha h2 a:hover{
       color:#046380;
}

body.two-columns #content #alpha .asset-body,
body.two-columns #content #alpha .asset-more-link{
  clear:both;
       margin:1em 1.5em;
       padding:auto 0em;
       color:#2b2b2b;
}

body.two-columns #content #alpha .asset-body a{
       color:#000000;
       text-decoration:underline;
}

body.two-columns #content #alpha .asset-body a:hover,
body.two-columns #content #alpha .asset-more-link a:hover{
       color:#112233;
}

body.two-columns #content #alpha .asset-more-link a{
       color:green;
}

body.two-columns #content #alpha .asset-footer{
   border-top:1px solid #d3d3d3;
   margin-top:1em;     
   padding-left:2em;
}

body.two-columns #content #alpha .asset-footer p{
  font-size:1.2em;
}

.asset-footer span,.asset-footer abbr{
  color:#3d3d3d;
}

body.two-columns #content #alpha .module-content{
  margin-left:2em;
}

body.two-columns #content #beta p,
body.two-columns #content #beta li{
  font-size:1.44em;
}

body.two-columns #content #beta li ul{
  font-size:69.4%;
}

body.two-columns #content .module-content a{
   text-decoration:underline;
   color:#000000;
}

body.two-columns #content .module-content ul{
   list-style-type: square;
}

body.two-columns #content #alpha .module h2{
       font-size:1.8em;
       clear:both;
       font-weight:bold;
       padding:0.3em 0.5em;
       margin:0.5em 0.4em 0.1em 0.4em;
       border-bottom:1px solid #d3d3d3;
}

/* Module */

.module{
  margin-bottom:1em;
}

.module h2{
  font-size:1.8em;
}

.module h3{
  font-size:1.4em;
  text-align:center;
}

.module table{
  width:90%;
  font-size:1.02em;
  margin:auto;
}

.module td{
  padding:0em 0.2em;
}

.module p,.module ul{
  margin-left:1em;  
}

.module li{
  margin-left:1em;
}

.module button{
  width:4em;
  height:2em;
  text-align:center;
}

#beta .module{
  /* background-color:#DEEBF7; */
  padding:1em;
  border-radius: 1em;
  border: 1px solid #d3d3d3;
}

#beta .module .sponsor img {
  filter: opacity(90%);
}

#beta .module .sponsor img:hover {
  filter: opacity(100%);
}

/* Homepage */

body.two-columns #content #alpha #homepage h3{
  font-size: 2.2em;
  font-weight: 500;
  margin-top: 2em;
}

body.two-columns #content #alpha #homepage ul{
  margin-left:4em;  
}

body.two-columns #content #alpha #homepage ul li,
body.two-columns #content #alpha #homepage ul li span{
   color: rgba(0,0,0,0.5);
}

body.mobile.two-columns #content #alpha #homepage ul{
    margin-left:2em;
}

body.mobile.two-columns #content #alpha #homepage ul li span{
    display: none;
}

@media (max-width: 48rem) {
  body.two-columns #content #alpha #homepage ul{
    margin-left:2em;
  }

  body.two-columns #content #alpha #homepage ul li span{
    display: none;
  }
}

#homepage #homepage-alpha{
       width:58%;
       float:left;
}

#homepage #homepage-beta{
       width:34%;
       float:left;
       margin-left:3%;
}

body.mobile #homepage #homepage-alpha,
body.mobile #homepage #homepage-beta{
    float:left;
    width:95%;
    margin-left:0;
}

@media (max-width: 30rem) {
  #homepage #homepage-alpha,
  #homepage #homepage-beta{
    float:left;
    width:95%;
    margin-left:0;
  }
}

body.two-columns #content #homepage .module-content li{
       line-height:180%;
       margin-left:1em;
       font-size:1.44em;
}

body.two-columns #alpha #homepage-beta .module h2{
       border-bottom:none;
}

body.two-columns #homepage #homepage-beta .module-content{
       border-left:1px solid #d3d3d3;
       border-top:1px solid #d3d3d3;
       padding:0.3em;
}

body.mobile.two-columns #homepage_pos img{
    max-width: 100%;
    overflow: auto;
}

@media (max-width: 48rem) {
  body.two-columns #homepage_pos img{
    max-width: 100%;
    overflow: auto;
  }
}

/* Footer */

#footer {
       margin:0 1em;
       border-top:1px solid #d3d3d3;
       color:#d3d3d3;
       padding-top:0;
       clear:both;  
       line-height:1.2;     
}

#footer p{
  font-size:1.6em;
}

#foot-content{
  float:right;  
}

#footer a{
  color:gray;
}

#footer p{
  float: right;
  text-align:right;
  padding:0.3em 0.1em 0.1em 0.3em;
  color:gray;
}

/* Website Index Page*/

/* 

div#page-alpha,div#page-beta{
  float:left;
  display:inline;
}

div#page-alpha{
  width:50%;
}

div#page-beta{
  width:30%;
}

*/

.mt-main-index #alpha #photo{
       width:120px;
       margin:0em 2em;
       padding:0;
}

.mt-main-index #alpha #photo p{
       padding:0;
       margin:0px;
       text-align:center;
       color:gray;
       font-size:1.58em;
}

.mt-main-index #alpha #photo img {
       padding:0.3em;
       width:100px;
       background-color:#ffffff;
       border:1px solid #336699;
}

/* Search Page */

#content #search_form img{
  border:none;
}

#content #search_form #search_input_box{
  border:1px solid #336699;
}

#content #search_form #search_button{
  text-align:center;
  height:2em;
  width:4em;
}

/* Entry */

body.one-column #content #alpha div.entry-asset{
  border-bottom:1px solid #d3d3d3;
  padding-bottom:1em;
}

body.one-column #content #alpha div.asset-nav,
body.one-column #content #alpha div.asset-footer{
       font-weight:bold;
       color:#FCB297;
       padding:0.3em 0.5em;
       margin:0 0 1em 0;
       border-bottom:none;
       background-color:#AAD2F0;
       -moz-border-radius: 1em;
       -webkit-border-radius:1em;
       border-radius: 1em;

  -moz-box-shadow:inset 0px 1px 0px 0px #eeeeee;
  -webkit-box-shadow:inset 0px 1px 0px 0px #eeeeee;
  box-shadow:inset 0px 1px 0px 0px #eeeeee;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #aad2f0), color-stop(1, #8bc1ed) );
  background:-moz-linear-gradient( center top, #aad2f0 5%, #8bc1ed 100% );
  /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aad2f0', endColorstr='#8bc1ed'); */
  background-color:#aad2f0;
  border:1px solid #dcdcdc;
  text-shadow:1px 1px 0px #eeeeee;
}

body.one-column #content #alpha div.asset-nav:after{
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
}

body.one-column #content #alpha div.asset-nav{
  zoom: 1;
}

body.one-column #content #alpha div.asset-footer{
  margin-top:2em;
  padding:1.5em;
  border:1px solid #d3d3d3;
  background-color:#DEEBF7;
}

body.one-column #content #alpha div.asset-footer h3{
  border-bottom:1px solid gray;
  font-size:1.92em;
  font-weight:bold;
  color:#556677;
}

body.one-column #content #alpha div.asset-footer ul{
  padding-left:2em;
  padding-right:2em;
}

body.one-column #content #alpha div.asset-footer li{
  color:#556677;
}

body.one-column #content #alpha div.asset-nav *{
  display:inline;
}

body.one-column #content #alpha div.asset-nav a{
  color:green;
}


body.mobile.one-column #content #alpha div.asset-nav div.entry-tags,
body.mobile.one-column #content #alpha div.asset-nav div.entry-categories{
  float:left;
  width: 70%;
  display: inline-block;
}

@media (max-width: 30rem) {
  body.one-column #content #alpha div.asset-nav div.entry-tags,
  body.one-column #content #alpha div.asset-nav div.entry-categories{
    float:left;
    width: 70%;
    display: inline-block;
  }
}


body.one-column #content #alpha div.asset-nav div.entry-location{
  width:20em;
  float:right;
  overflow: hidden;
  white-space: nowrap;
}

body.one-column #content #alpha div.asset-nav div.entry-location li{
  display:block;
  list-style-type: none; 
}

body.one-column #content #alpha div.asset-nav div.entry-location a{
       color:#556677;
       text-decoration:underline;
       font-size:95%;
}

body.mobile.one-column #content #alpha div.asset-nav div.entry-location{
  display: none;
}

@media (max-width: 30rem) {
  body.one-column #content #alpha div.asset-nav div.entry-location{
    display: none;
  }
}

/* 文档导航链接 手机端 */

body.one-column #content #alpha div.asset-nav div.entry-location-mobile{
  display: none;
  float: right;
}

body.mobile.one-column #content #alpha div.asset-nav div.entry-location-mobile{
  display: inline-block;
  text-align: right;
  float:right;
  width: 20%;
}

body.mobile.one-column #content #alpha div.asset-nav div.entry-location-mobile li {
  display:inline;
  list-style-type: none; 
}

@media (max-width: 30rem) {
  body.one-column #content #alpha div.asset-nav div.entry-location-mobile{
    display: inline-block;
    float:right;
    text-align: right;
    width: 20%;
  }

  body.one-column #content #alpha div.asset-nav div.entry-location-mobile li {
    display:inline;
    list-style-type: none; 
  }
}

body.one-column #content #alpha div.asset-meta{
  margin:1.5em auto 2em;
  line-height:0.8;
}

body.one-column #content #alpha div.asset-meta *{
    color:#556677;
}

body.one-column #content #alpha div.asset-meta .sponsor-banner{
  display: block;
  margin: 1.5em 0.8em;
  padding: 0.7em 1em;
  font-size: 0.87rem;
  line-height: 1.5;
  color: #567;
  background-color: #deebf7;
  border: 1px solid #dbe4e0;
  border-radius: 4px;
}

body.mobile.one-column #content #alpha .entry-sponsor .entry-sponsor-img {
  display: none;
}

@media (max-width: 30rem) {
  body.one-column #content #alpha .entry-sponsor .entry-sponsor-img {
    display: none;
  }
}

body.one-column #content #alpha div.asset-content a{
  text-decoration:underline;
  color:#112233;
}

body.one-column #content #alpha div.asset-content a:visited{
  color:#112233;
}

body.one-column #content #alpha div.asset-content blockquote{
  background-color:#f5f2f0;
  padding:1em;
  margin:2em 2em;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  -moz-border-radius: 1em; /* FF1+ */
  -webkit-border-radius:1em; /* Saf3+, Chrome */
        border-radius: 1em;  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  border-width: 0.3em;   
  border-color: #e0dfcc;
  border-style: solid;
  text-shadow: 0 1px white;
  overflow: auto;
}

body.mobile.one-column #content #alpha div.asset-content blockquote{
    padding:0.5em 1em;
    margin:1em 1em;
    -moz-border-radius: 1em; /* FF1+ */
    -webkit-border-radius:1em; /* Saf3+, Chrome */
    border-radius: 1em;
    border-width: 0.15em;   
}

@media (max-width: 48rem) {
   body.one-column #content #alpha div.asset-content blockquote{
    padding:0.5em 1em;
    margin:1em 1em;
    -moz-border-radius: 1em; /* FF1+ */
    -webkit-border-radius:1em; /* Saf3+, Chrome */
    border-radius: 1em;
    border-width: 0.15em;   
  }
}

 /* Adsense */
#googlead2{
 margin:0 auto;
 text-align:center;   
}

#related_entries,#entry_utility,#cre{
  margin-top:4em;
}

#related_entries ul{
  margin-left:2em;    
}

#entry_utility ul{
  margin-left:3em;
}

#related_entries ul a,
#entry_utility ul a{
  text-decoration:underline;
}

#entry_utility ul input{
  border:1px solid #d3d3d3;
}

#entry_utility ul img{
  border:none;
}

#related_entries li div.entry-body{
  margin-left:1em;
  padding-left:0.4em;
  border-left:0.4em solid gray; 
}

#cre-inner {
  width: 100%;
  max-width: 100%;
}

div#cre-left,div#cre-right{
  width: 49%;
  display:inline-block;
}

div#crd-left{
  float:left;
}

div#cre-right{
  float:right;
}

#cre-inner img {
  width: 100%;
  max-width: 100%;
}

#sup-post-2 p img{
  width: 100%;
  max-width: 100%;
}

body.mobile #cre div#cre-inner{
    width: 98%;
    max-width:98%;
  }
 body.mobile  div#cre-left,
 body.mobile  div#cre-right{
    float: none;
    margin: 0.5em auto;
    width: 98%;
    display: block;
  }
body.mobile div#cre-left a,
body.mobile div#cre-right a{
    text-align: center;
    display: block;
  }
body.mobile div#cre-left img,
body.mobile div#cre-right img{
    max-width: 100%;
    overflow: auto;
  }

body.mobile #sup-post-2 p{
  display: block;
  width: 98%;
  position: relative;
  height: 0;
  padding: 26.67% 0 0 0;
  overflow: hidden;
}

body.mobile #sup-post-2 p img{
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (max-width: 48rem) {
  #cre div#cre-inner{
    width: 98%;
    max-width:98%;
  }
  div#cre-left,
  div#cre-right{
    float: none;
    margin: 0.5em auto;
    width: 98%;
    display: block;
  }
  div#cre-left a,
  div#cre-right a{
    text-align: center;
    display: block;
  }
  div#cre-left img,
  div#cre-right img{
    max-width: 100%;
    overflow: auto;
  }

  #sup-post-2 p {
    display: block;
    width: 98%;
    position: relative;
    height: 0;
    padding: 26.67% 0 0 0;
    overflow: hidden; 
  }

  #sup-post-2 p img{
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

/* Comments */

body.one-column #content #alpha #comments{
  clear:both;
  margin-top:2em;
}

body.one-column #content #alpha #comments h2{
  padding-top:2em;
}

body.one-column #content #alpha #comments a{
  text-decoration:underline;
}

body.one-column #content #alpha #comments .comment{
  border-bottom:1px dashed #d3d3d3;
}

body.one-column #content #alpha #comments .comment-header{
  margin-top:1.6em;  
}

body.one-column #content #alpha #comments .comment-header *{
  color:#2B2B2B;  
  font-weight:700;
}

body.one-column #content #alpha #comments .asset-meta{
  margin:0.6em 0;
}

body.one-column #content #alpha #comments .comment-content{
  margin-left:1em;
  font-size:0.9em;
  line-hieght:180%;
}

body.one-column #content #alpha #comments .comment-content blockquote{
  background-color:#e0dfcc;
  padding:2em;
  margin:2em 2em 2em 2em;
  -moz-border-radius: 1em; 
  -webkit-border-radius:1em;
  border-radius: 1em;
  font-size: 0.9em
}

body.one-column #content #alpha #comments .comment-content blockquote pre{
  font-weight:700;
  margin-bottom:1.5em;
  font-size: 1.6em;
}

body.one-column #content #alpha #comments .comment-footer{
  width:40%;
  margin-left:55%;
}

body.one-column #content #alpha #comments .comment-footer p{
  font-size:1.2em;
  _font-size:1.2em;
}

body.one-column #content #alpha #comments .comment-footer *{
    color:black;
}

body.one-column #content #alpha #comments #comments-open input{
  border:1px solid #d3d3d3;
  margin-top:0;
  line-height:1.2;
  padding:0.4em 0.3em;
  background-color:#f5f4df;
}

body.one-column #content #alpha #comments #comments-open p{
  margin: 0.4em;
}

body.one-column #content #alpha #comments #comments-open textarea{
  border:1px solid #d3d3d3;
  background-color:#f5f4df;
  padding:0.5em;
  width:90%;
}

body.one-column #content #alpha #comments #comments-open input#comment-submit{
  width:10em;
  padding:0.2em 3em;
  text-align:center;
}

span.hint{
  color:gray;
}

body.one-column #content #alpha #comments #comment-last:target {
  animation:target-fade 4s 1;
  -webkit-animation: target-fade 4s 1;
  -moz-animation: target-fade 4s 1;
}

@keyframes move {
  0% { background-color: rgba(0,0,0,.1); }
  100% { background-color: rgba(0,0,0,0); }
}

@-webkit-keyframes target-fade {
  0% { background-color: rgba(0,0,0,.1); }
  100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
  0% { background-color: rgba(0,0,0,.1); }
  100% { background-color: rgba(0,0,0,0); }
}

body.one-column #content #alpha #comments #comments-open div#wait input{
  background-color:#ffffdd;
}

body.one-column #content #alpha #comments #comments-open div#wait *{
  color:#2B2B2B;
  background-color:#ffffdd;
}

body.mobile.one-column #content #alpha #comments .comment-footer{
   display: none;
}

@media (max-width: 48rem) {
 body.one-column #content #alpha #comments .comment-footer{
    display: none;
  }
}  
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
  color: black;
  text-shadow: 0 1px white;
  font-family: monospace, Consolas, Monaco, 'Andale Mono';
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  font-size:1.2em;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
  #header,
  .asset-header,
  #gegz1,
  #sup-post-2,
  #cre,
  #comments {
    display: none;
  }
}

/* Code blocks */
pre[class*="language-"] {
  padding: 0em 0em 0.5em 0em;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: hsla(0,0%,100%,.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}


.token.regex,
.token.important {
  color: #e90;
}

.token.important {
  font-weight: bold;
}

.token.entity {
  cursor: help;
}
.token a {
  color: inherit;
}
